:root {
  /* 基础颜色 */
  --primary-color: #409EFF;
  --bg-color: #FFFFFF;
  --text-primary: #303133;
  --text-secondary: #606266;
  --border-color: #DCDFE6;
  
  /* 左侧面板变量 */
  --left-panel-bg: var(--bg-color);
  --left-panel-border: var(--border-color);
  
  /* 示例项变量 */
  --example-item-bg: var(--bg-color);
  --example-item-hover-bg: #F5F7FA;
  --example-item-active-bg: var(--primary-color);
  --example-item-active-color: white;
  
  /* Gist项变量 */
  --gist-item-bg: var(--bg-color);
  --gist-item-hover-bg: #F5F7FA;
  --gist-item-active-bg: var(--primary-color);
  --gist-item-active-color: white;
  --gist-icon-bg: var(--primary-color);
  
  /* 搜索栏变量 */
  --search-bar-bg: var(--bg-color);
  --search-bar-border: var(--border-color);
  
  /* 深色主题侧边栏变量 */
  --sidebar-bg: #1e1e1e;
  --sidebar-header-bg: linear-gradient(90deg, #2d3748 0%, #4a5568 100%);
  --sidebar-border: #4a5568;
  --sidebar-text: #ffffff;
  --sidebar-text-secondary: #a0aec0;
  --sidebar-hover-bg: #2d3748;
  --sidebar-active-bg: #3182ce;
  --sidebar-input-bg: #1e1e1e;
  --sidebar-input-border: #4a5568;
  --sidebar-input-focus: #63b3ed;
  
  /* 阴影变量 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 深色主题 */
[data-theme="dark"] {
  --left-panel-bg: #1D1E1F;
  --left-panel-border: #4C4D4F;
  --example-item-bg: #1D1E1F;
  --example-item-hover-bg: #2C2D2E;
  --gist-item-bg: #1D1E1F;
  --gist-item-hover-bg: #2C2D2E;
  --gist-icon-bg: var(--primary-color);
  --search-bar-bg: #1D1E1F;
  --search-bar-border: #4C4D4F;
} 